<template>
  <div class="content-style">
    <div v-html="content"></div>
  </div>
</template>
<script>
import Blazy from "vux-blazy";
export default {
  props: {
    contentHtml: String,
    containerId: String
  },
  created() {},
  mounted() {
    this.format(this.contentHtml);
  },
  watch: {
    contentHtml(val) {
      console.log("watch goods content length:", val.length);
      if (val) {
        this.format(val);
      }
    }
  },
  data() {
    return {
      content: ""
    };
  },
  computed: {},
  methods: {
    format(val) {
      const content = document.createElement("div");
      content.innerHTML = val;
      const imgs = content.querySelectorAll("img");

      imgs.forEach(el => {
        el.removeAttribute("height");
        el.removeAttribute("width");
        el.setAttribute("data-src", el.getAttribute("src"));
        el.classList.add("lazy");
        el.style.width = "100%";
      });

      this.content = content.innerHTML;

      new Blazy({
        selector: ".lazy",
        container: `#${this.containerId}`,
        offset: 667,
        success(ele) {}
      });
    }
  },
  components: {}
};
</script>
<style>
.content-style {
  padding: 5px;
  /*background: #fff;*/
}

.content-style img {
  display: block;
  max-width: 100% !important;
}
</style>
